<template>
  <v-container fluid>
    <v-data-iterator
      :items="items"
      :items-per-page.sync="itemsPerPage"
      :page.sync="page"
      :search="search"
      :sort-by="sortBy.toLowerCase()"
      :sort-desc="sortDesc"
      hide-default-footer
    >
      <template v-slot:header>
        <v-toolbar
          :color="color"
        >
          <h4>分类链接|快速跳转</h4>
          <template v-if="$vuetify.breakpoint.mdAndUp">
            <v-spacer></v-spacer>
            <v-btn
              :color="color"
              width="80px"
              @click="openAddLink"
            >
              添加<v-icon samll>mdi-plus-outline</v-icon>
            </v-btn>
            <v-dialog
              v-model="dialog"
              max-width="500px"
            >
              <v-card max-width="500">
                <v-card-title><h5>新增链接</h5></v-card-title>
                <v-card-text>
                      <v-row>
                        <v-col cols="12" md="3">
                          <v-checkbox
                            v-model="checkbox"
                            label="Common"
                          ></v-checkbox>
                        </v-col>
                        <v-col cols="12" md="4">
                          <v-text-field
                            v-model="info.link_type"
                            label="分类"
                          ></v-text-field>
                        </v-col>
                        <v-col cols="12" md="5">
                          <v-text-field
                            v-model="info.link_name"
                            label="名称"
                          ></v-text-field>
                        </v-col>
                      </v-row>
                      <v-row>
                        <v-col cols="12">
                          <v-text-field
                            v-model="info.link_href"
                            label="链接"
                          ></v-text-field>
                        </v-col>
                      </v-row> 
                </v-card-text>
                <v-card-actions>
                  <v-btn color="green" v-text="tip" text></v-btn>
                  <v-spacer></v-spacer>
                  <v-btn color="primary" @click="dialog = false">取消</v-btn>
                  <v-btn samll color="primary" @click="submit_link">提交</v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
            <v-spacer></v-spacer>
            <v-btn-toggle
              v-model="sortDesc"
              mandatory
            >
              <v-btn
                large
                depressed
                :color="color"
                :value="false"
              >
                <v-icon>mdi-arrow-up</v-icon>
              </v-btn>
              <v-btn
                large
                depressed
                :color="color"
                :value="true"
              >
                <v-icon>mdi-arrow-down</v-icon>
              </v-btn>
            </v-btn-toggle>
          </template>
        </v-toolbar>
      </template>

      <template v-slot:default="props">
        <v-row>
          <v-col
            v-for="item in props.items"
            :key="item.name"
            cols="12"
            sm="6"
            md="4"
            lg="4"
          >
            <v-card height="380">
              <v-card-title class="font-weight-bold">
                {{ item.name }}
              </v-card-title>

              <v-divider></v-divider>

              <v-list dense>
                <v-list-item
                  v-for="(unit, index) in item.list"
                  :key="index"
                >
                  <v-list-item-content>
                    <v-btn 
                      :href=unit.href
                      target="_blank"
                      text
                      dense 
                      small 
                      width="120px" 
                      color="primary"
                    ><v-icon>mdi-open-in-new</v-icon>{{unit.link}}</v-btn>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-card>
          </v-col>
        </v-row>
      </template>
    </v-data-iterator>
  </v-container>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {
        
    },
    data () {
      return {
        color: '#4FC3F7FF',
        dialog: false,
        itemsPerPageArray: [],
        search: '',
        filter: {},
        sortDesc: true,
        page: 1,
        itemsPerPage: 6,
        sortBy: 'name',
        keys: [
          'Name',
          'Calories',
          'Fat',
          'Carbs',
          'Protein',
          'Sodium',
          'Calcium',
          'Iron',
        ],
        tip: '',
        checkbox: false,
        info: {
          link_ower: '',
          link_type: '',
          link_name: '',
          link_href: ''
        },
        items: [
          {
            name: '分类1',
            list: [{href: 'http://www.baidu.com', link: '百度'}]
          }
        ],
      }
    },
    computed: {
      numberOfPages () {
        return Math.ceil(this.items.length / this.itemsPerPage)
      },
      filteredKeys () {
        return this.keys.filter(key => key !== 'Name')
      },
    },
    mounted() {
      this.query_data_list()
    },
    methods: {
      nextPage () {
        if (this.page + 1 <= this.numberOfPages) this.page += 1
      },
      formerPage () {
        if (this.page - 1 >= 1) this.page -= 1
      },
      updateItemsPerPage (number) {
        this.itemsPerPage = number
      },
      openAddLink(){
        this.dialog = true
        this.info = {
          link_ower: '',
          link_type: '',
          link_name: '',
          link_href: ''
          }
        this.checkbox = false
      },
      query_data_list(){
        console.log('query_data_list .. ')
        let get_data = {'username': localStorage.getItem('username')}
        this.$api.job.queryLinkInfo(get_data).then(res=>{
          console.log(res)
          this.items = res.data.data
        })
      },
      submit_link(){
        console.log('submitLink .. ')
        if(this.checkbox){
          this.info.link_ower = 'common'
        }else {
          this.info.link_ower = localStorage.getItem('username')
        }
        let get_data = { "params": JSON.stringify(this.info) }
        this.$api.job.submitLink(get_data).then(res=>{
          console.log(res)
          if(res.data.success===1){
            this.tip = '添加成功'
            this.query_data_list()
          }
        })
      }
    },
})
</script>

<style scoped>

</style>